<template>
  <div class="myorder">
    <el-container class="Box">
      <el-header class="titlebox" height="100px">
            <div class="titleText">
                <span style="font-weight:700">
                  我的订单
                </span>
            </div>
            <div class="btnBox">
                <span>
                    <el-button @click="backHome">返回首页</el-button>
                </span>
            </div>
      </el-header>
      <el-main class="mainbox">
            <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="innerbox">
                <el-tab-pane label="全部" name="first" class="innerItem">
                    <div class="box-card" v-for="(item, index) of this.orderlist" :key="index">
                        <el-row :gutter="10">
                            <el-col :span="6" >
                                <img :src="baseurl+item.picpath" class="imgBox">
                            </el-col>
                            <el-col :span="18">
                                <div class="infoBox">
                                    <div class="message">
                                        <span>{{item.title}}</span>
                                        <span>vivo</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">价格：</span>
                                        <span style="color:red;font-weight:700;font-size:24px"><span style="font-size:16px">￥&nbsp;</span>{{item.price}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">出售地：</span>
                                        <span class="content_little">{{item.fromwhere}}</span>
                                    </div>
                                    <div>
                                        <span class="content_little">{{item.username}}</span>
                                        <span style="padding-left:200px">
                                            <span class="text_titile">联系电话:</span>
                                            <span class="content_little">{{item.tel}}</span>
                                        </span>
                                    </div>
                                    <div>
                                        <span style="color:orange"><span v-if="item.status === 2">已收货</span><span v-else>待收货</span></span>
                                        <span v-if="item.status === 2">
                                            <el-button type="primary" style="margin-left:476px" @click="Talking(item.id,item.userid)">评价</el-button>
                                            <el-button type="danger" @click="deldect(item.id)">删除</el-button>
                                        </span>
                                        <span v-else>
                                           <el-button type="success" style="margin-left:419px" @click="sureorder(item.id)">确定收货</el-button>
                                           <el-button type="danger" @click="deldect(item.id)">取消订单</el-button>
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待收货" name="second" class="innerItem">
                    <div class="box-card" v-for="(item,index) of this.orderlist" :key="index">
                        <el-row :gutter="10">
                            <el-col :span="6" >
                                <img :src="baseurl+item.picpath" class="imgBox">
                            </el-col>
                            <el-col :span="18">
                                <div class="infoBox">
                                    <div class="message">
                                        <span>{{item.title}}</span>
                                        <span>vivo</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">价格：</span>
                                        <span style="color:red;font-weight:700;font-size:24px"><span style="font-size:16px">￥&nbsp;</span>{{item.price}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">出售地：</span>
                                        <span class="content_little">{{item.fromwhere}}</span>
                                    </div>
                                    <div>
                                        <span class="content_little">{{item.username}}</span>
                                        <span style="padding-left:200px">
                                            <span class="text_titile">联系电话:</span>
                                            <span class="content_little">{{item.tel}}</span>
                                        </span>
                                    </div>
                                    <div>
                                        <span style="color:orange"><span v-if="item.status === 2">已收货</span><span v-else>待收货</span></span>
                                        <span v-if="item.status === 2">
                                            <el-button type="primary" style="margin-left:476px" @click="Talking(item.id,item.userid)">评价</el-button>
                                            <el-button type="danger" @click="deldect(item.id)">删除</el-button>
                                        </span>
                                        <span v-else>
                                            <el-button type="success" style="margin-left:419px" @click="sureorder(item.id)">确定收货</el-button>
                                           <el-button type="danger" @click="deldect(item.id)">取消订单</el-button>
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已收货" name="third" class="innerItem">
                    <div class="box-card" v-for="(item,index) of this.orderlist" :key="index">
                        <el-row :gutter="10">
                            <el-col :span="6" >
                                <img :src="baseurl+item.picpath" class="imgBox">
                            </el-col>
                            <el-col :span="18">
                                <div class="infoBox">
                                    <div class="message">
                                        <span>{{item.title}}</span>
                                        <span>vivo</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">价格：</span>
                                        <span style="color:red;font-weight:700;font-size:24px"><span style="font-size:16px">￥&nbsp;</span>{{item.price}}</span>
                                    </div>
                                    <div>
                                        <span class="text_titile">出售地：</span>
                                        <span class="content_little">{{item.fromwhere}}</span>
                                    </div>
                                    <div>
                                        <span class="content_little">{{item.username}}</span>
                                        <span style="padding-left:200px">
                                            <span class="text_titile">联系电话:</span>
                                            <span class="content_little">{{item.tel}}</span>
                                        </span>
                                    </div>
                                    <div>
                                        <span style="color:orange"><span v-if="item.status === 2">已收货</span><span v-else>待收货</span></span>
                                        <span v-if="item.status === 2">
                                            <el-button type="primary" style="margin-left:476px" @click="Talking(item.id,item.userid)">评价</el-button>
                                            <el-button type="danger" @click="deldect(item.id)">删除</el-button>
                                        </span>
                                        <span v-else>
                                           <el-button type="success" style="margin-left:419px" @click="sureorder(item.id)">确定收货</el-button>
                                           <el-button type="danger" @click="deldect(item.id)">取消订单</el-button>
                                        </span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-main>
        <el-dialog title="商品评价" :visible.sync="dialogFormVisible">
            <el-form :model="Talkform">
            <el-form-item label="评价" :label-width="formLabelWidth" class="dialogBox">
                <el-input v-model="Talkform.evaluation"></el-input>
            </el-form-item>
            <el-form-item label="分数" :label-width="formLabelWidth"  class="dialogBox">
                <el-rate
                v-model="Talkform.star"
                show-score
                allow-half
                style="margin-top:11px;margin-left:5px"
                text-color="#ff9900"
                score-template="{value}">
                </el-rate>
            </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureTalk">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'myorder',
  data () {
    return {
        activeName: 'first',
        dialogFormVisible: false,
        formLabelWidth:'80px',
        Talkform: {},
        orderlist: [],
        status: 0,
        baseurl: 'http://123.56.11.253:8181/transaction/',
        ISshow: true,
        orderid: '',
        sellid: ''

    }
  },
  components: {},
  created () {
      this.getCookies()
      this.getOrder()
  },
  methods: {
    getCookies () {
      this.userID = sessionStorage.getItem('userId')
    },
    // 切换板块
    handleClick(tab, event) {
     if (tab.label === "全部") {
        this.status = 0
        this.getOrder()
      } else if (tab.label === "待收货") {
        this.status= 1
        this.getOrder()
      } else {
        this.status= 2
        this.getOrder()
      }
    },
    // 获取订单
    async getOrder () {
      const AUTH_TOKEN = sessionStorage.getItem('usertoken')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      const res = await this.$http.get(`order/list?id=${this.userID}&pageNow=1&pageSize=9999&status=${this.status}`)
      console.log(res)
      const {msg,status,data:{records}} = res.data
      if( status === 200) {
        this.orderlist = records
        this.picurl = records.picpath
      } else {
        console.log(msg)
      }
    },
    // 返回首页
    backHome () {
        this.$router.push({name: 'home'})
    },
    // 评价
    Talking (id,sellid) {
        this.orderid = id
        this.sellid = sellid
        this.dialogFormVisible = true
    },
    // 确定评价
    async sureTalk () {
        const form = {
            id: this.orderid,
            evaluation: this.Talkform.evaluation,
            star: this.Talkform.star,
            userid: this.sellid
        }
        const res = await this.$http.put('order/evaluation',form)
        console.log(res)
        const {msg, status} = res.data
        if (status === 200) {
            this.$message.success('评价成功！')
            this.dialogFormVisible = false
        } else {
            this.dialogFormVisible = false
            this.$message.error(msg)
        }
    },
    // 删除订单
    deldect (id) {
      const oid = id
      this.$confirm('此操作将删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(oid)
        const res = await this.$http.delete(`order/delete?id=${oid}`)
        console.log(res)
        const {msg, status} = res.data
        if (status === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getOrder()
        } else {
          this.$message.error(msg)
        }
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    // 确定收货
    async sureorder (id) {
      const res = await this.$http.put(`order/changeStatus?id=${id}`)
        console.log(res)
        const {msg, status} = res.data
        if (status === 200) {
            this.$message.success('收货成功！')
            this.getOrder()
        } else {
            this.$message.error(msg)
        }
    }
  }
}
</script>

<style scoped lang="stylus">
.Box
  height 100%
  min-width 1525px
  margin 0 0 0 0 !important
  .titlebox
    background-color #fff
    border-bottom 1px solid #aaa
    .titleText
      font 700 24px/100px microsoft yahei
      color #666
      padding-left 120px
      width 1120px
    .btnBox
      text-align right
      line-height 130px
      padding-right 150px
      padding-top 40px
  .mainbox
    padding 15px 150px 0 150px
    background-color #f2f2f2
    height 100%
    .innerbox
      background-color #fff
      border-radius 5px
      padding 10px 10px 10px 10px
      min-height 600px
    .box-card 
        width 1000px
        margin 10px 50px 20px 20px
        border-radius 4px
        border 1px solid #bbb
        padding 10px 0 10px 20px
        height 200px
        overflow hidden
        .imgBox
          width 220px
          height 200px
        .infoBox
          padding 20px 0 20px 10px
          div
            padding 5px 0 5px 18px
          .message
            color #222
            font-size 16px
            line-height 18px
            padding 0 5px 0px 5px
            margin-bottom 10px
            height 36px
            overflow hidden
          .text_titile
            color #aaa
            font-size 14px
          .content_little
            color #222
            font-size 16px
.dialogBox
  width 500px
  padding-left 80px
</style>
